<template>
  <div id="app">
    <n-config-provider
      :theme='getDarkTheme'
      :theme-overrides="getThemeOverrides"
      :locale="zhCN"
      :date-locale="dateZhCN"
      :breakpoints="breakpoints"
      >
      <router-view />
    </n-config-provider>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue'
  import { useStore } from 'vuex'
  import { darkTheme } from 'naive-ui'
  import { zhCN, dateZhCN } from 'naive-ui'

  const store = useStore()

  const getDarkTheme = computed(() => {
    return store.getters.designSetting.darkTheme ? darkTheme : undefined
  })

  const getThemeOverrides = computed(() => {
    return store.getters.designSetting.appTheme
  })

  const breakpoints = {
    xs: 0,
    s: 640,
    m: 1024,
    l: 1280,
    xl: 1536,
    xxl: 1920,
    xxxl: 2560
  }

  onMounted(() => {
  })

</script>


<style lang='stylus' scoped>
  // @import './styles/index'
    #app
      width 100%
      height 100%

      .n-config-provider
        width 100%
        height 100%
</style>
